<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="/jstl/tld/c-rt.tld"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>系统主页</title>
		<link rel="stylesheet" href="${ctx }/css/style.default.css" type="text/css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="${ctx}/js/plugins/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/plugins/jquery.cookie.js"></script>
		<script type="text/javascript" src="${ctx}/js/plugins/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/plugins/jquery.uniform.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/custom/general.js"></script>
		<script type="text/javascript" src="${ctx}/js/custom/tables.js"></script>
		<script type="text/javascript">
			$(function(){
				$.ajax({
					type:'post',
					url:'${ctx}/pupil/find',
					dataType:'json',
					async:false,//异步请求改为同步请求
					success:function(data){
						if(data){
							$.each(data,function(i,ele){
								var str = '';
								str += '<tr class="gradeX" id="row'+i+'">'+
		                          '<td align="center"><span class="center">'+
		                            '<input type="checkbox" />'+
		                          '</span></td>'+
		                            '<td>'+ele.name+'</td>'+
		                            '<td class="center">'+ele.sex+'</td>'+
		                            '<td>'+ele.birthday+'</td>'+
		                            '<td class="center">65</td>'+
		                            '<td class="center">'+ele.phone+'</td>'+
		                            '<td>'+ele.address+'</td>'+
		                            '<td><a href="#" onclick="orbitInfo()">轨迹信息</a></td>'+
		                        '</tr>';
		                        $('#tbody').append(str);
							});
						}
					}
				});
			});
			
			function orbitInfo(){
				$("#list").removeClass("current");
				$("#map").addClass("current");
				$("#infoMap").css('display','block');
				$("#infoList").css('display','none');
				$("#iframe").attr("src","${ctx}/ic/orbitInfo");
			}
		</script>
	</head>
	<body class="withvernav">
		<div class="bodywrapper">
			<div class="topheader">
				<div class="left">
					<h1 class="logo">
						桂软.
						<span>老年人监控</span>
					</h1>
					<span class="slogan">后台管理系统</span>

					<div class="search">
						<form action="" method="post">
							<input type="text" name="keyword" id="keyword" value="" placeholder="请输入"/>
							<button class="submitbutton"></button>
						</form>
					</div>
					<!--search-->

					<br clear="all" />

				</div>
				<!--left-->

				<div class="right">
					<!--<div class="notification">
                <a class="count" href="ajax/notifications.html"><span>9</span></a>
        	</div>-->
					<div class="userinfo">
						<img src="${ctx }/images/thumbs/avatar.png" alt="" />
						<span>管理员</span>
					</div>
					<!--userinfo-->

					<div class="userinfodrop">
						<div class="avatar">
							<a href=""><img src="${ctx }/images/thumbs/avatarbig.png" alt="" />
							</a>
							<div class="changetheme">
								切换主题:
								<br />
								<a class="default"></a>
								<a class="blueline"></a>
								<a class="greenline"></a>
								<a class="contrast"></a>
								<a class="custombg"></a>
							</div>
						</div>
						<!--avatar-->
						<div class="userdata">
							<h4>
								Juan
							</h4>
							<span class="email">youremail@yourdomain.com</span>
							<ul>
								<li>
									<a href="editprofile.html">编辑资料</a>
								</li>
								<li>
									<a href="accountsettings.html">账号设置</a>
								</li>
								<li>
									<a href="help.html">帮助</a>
								</li>
								<li>
									<a href="index.html">退出</a>
								</li>
							</ul>
						</div>
						<!--userdata-->
					</div>
					<!--userinfodrop-->
				</div>
				<!--right-->
			</div>
			<!--topheader-->


			<div class="header">
				<ul class="headermenu">
					<li class="current">
						<a href="${ctx }/ic/index"><span class="icon icon-flatscreen"></span>首页</a>
					</li>
					<li>
						<a href="${ctx }/imc/addPupil"><span class="icon icon-pencil"></span>信息管理</a>
					</li>
					<li>
						<a href="messages.html"><span class="icon icon-message"></span>查看消息</a>
					</li>
					<li>
						<a href="reports.html"><span class="icon icon-chart"></span>统计报表</a>
					</li>
				</ul>

				<div class="headerwidget">
					<div class="earnings">
						<div class="one_half">
							<h4>
								新增用户
							</h4>
							<h2>
								30
							</h2>
						</div>
						<!--one_half-->
						<div class="one_half last alignright">
							<h4>
								其他占比
							</h4>
							<h2>
								53%
							</h2>
						</div>
						<!--one_half last-->
					</div>
					<!--earnings-->
				</div>
				<!--headerwidget-->

			</div>
			<!--header-->
			<div class="vernav2 iconmenu">
				<ul>
					<li class="current">
						<a href="#formsub" class="elements">系统首页</a>
						<span class="arrow"></span>
						<ul id="formsub">
							<li class="current">
								<a href="${ctx }/imc/addPupil">地图显示</a>
							</li>
							<li>
								<a href="${ctx }/imc/findPupil">查看被监护人</a>
							</li>
						</ul>
					</li>
				</ul>
				<a class="togglemenu"></a>
				<br />
				<br />
			</div>
			
			<div class="centercontent">

				<div class="pageheader">
					<h1 class="pagetitle">
						系统首页
					</h1>
					<span class="pagedesc">页面的描述内容</span>

					<ul class="hornav">
						<li id="map" class="current">
							<a href="#infoMap">地图信息</a>
						</li>
						<li id="list">
							<a href="#infoList">信息列表</a>
						</li>
					</ul>
				</div>
				<!--pageheader-->

				<div id="contentwrapper" class="contentwrapper">

					<div id="infoMap" class="subcontent">
						<div class="notibar announcement">
							<a class="close"></a>
							<h3>
								最新公告
							</h3>
							<p>
								公告，是指政府、团体对重大事件当众正式公布或者公开宣告，宣布。国务院2012年4月16日发布、2012年7月1日起施行的《党政机关公文处理工作条例》，对公告的使用表述为：“适用于向国内外宣布重要事项或者法定事项”。其中包含两方面的内容
							</p>
						</div>
						<!-- notification announcement -->
						
						<div>
							<iframe id="iframe" src="${ctx }/ic/infoMap" scrolling="no" frameborder="0" style="width: 100%;height: 500px;"></iframe>
						</div>
					</div>
					<!-- #updates -->

					<div id="infoList" class="subcontent" style="display: none;">
			                <table cellpadding="0" cellspacing="0" border="0" class="stdtable" id="dyntable2">
			                    <colgroup>
			                        <col class="con0" style="width: 4%" />
			                        <col class="con1" />
			                        <col class="con0" />
			                        <col class="con1" />
			                        <col class="con0" />
			                    </colgroup>
			                    <thead>
			                        <tr>
			                          <th class="head0 nosort">&nbsp;</th>
			                            <th class="head0">姓名</th>
			                            <th class="head1">性别</th>
			                            <th class="head0">出生日期</th>
			                            <th class="head1">年龄</th>
			                            <th class="head1">联系电话</th>
			                            <th class="head0">家住地址</th>
			                            <th class="head1 nosort center">操作</th>
			                        </tr>
			                    </thead>
			                    
			                    <tbody id="tbody">
			                    </tbody>
			                </table>
						&nbsp;
					</div>
					<!-- #activities -->

				</div>
				<!--contentwrapper-->

				<br clear="all" />

			</div>
			<!-- centercontent -->


		</div>
		<!--bodywrapper-->

	</body>
</html>
